

.side-panel{
    position: relative;
    z-index: 1000;
    width: 100%;
    transition-property: min-height,max-height,opacity;
    transition-duration: 0.3s;
    transition-delay: 0s;
    max-height: 0px;
    transition-timing-function: ease;
    height: 0px;
    min-height: 0px;
    overflow: hidden;
    opacity:0
}
.self{
    transition-property: min-height,max-height,opacity;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease;
    height: 0px;
    min-height: 300px;
    opacity:1;
    height: auto;
}
#panel-activer{
    display:none;
}
#panel-activer:checked + .panel-parent .side-panel {
    min-height: 500px;
    max-height: 1000px;
    height: auto;
    opacity:1
}
#panel-activer:checked + .panel-parent .self {
    /*display: none;*/
    opacity:0;
    min-height: 0px;
    max-height: 0px;
    overflow: hidden;

}


